// vw适配方案
// 像素值转换为视口值
.vw(@a, @vp: 1226) {
    @result: unit(round(@a * 100 / @vp, 10), vw);
}

// vh适配方案
// 像素值转换为视口值
.vh(@a, @vp: 920) {
    @result: unit(round(@a * 100 / @vp, 10), vh);
}

@fontColor: #656565;

@fontColorActive: #000;
// 激活状态下盒子背景颜色
@activeBgColor: rgba(27, 134, 219, 1);
// 普通状态下盒子背景颜色
@bgColor: #444444b0;
// 窗口背景颜色
@winbgc: #efefef;


* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

body {
    width: 100%;
    background-color: @winbgc;

     nav {
        width: 94%;
        height: .vh(40)[];
        line-height: .vh(40)[];
        margin: 0 auto;

        ul {
            display: flex;

            li {
                font-size: 14px;
                margin-right: .vw(20)[];
                user-select: none;
                color: @fontColor;
                cursor: pointer;
                position: relative;

                &.current {
                    color: @fontColorActive; 
                }

                &.current::after {
                    width: 100%;
                    background-color: @activeBgColor;
                    transition: all .3s;
                }

                &:after {
                    content: "";
                    display: block;
                    width: 0%;
                    background-color: transparent;
                    height: .vh(2)[];
                    transition: all .3s;
                    position: relative;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: .vh(3)[];
                }

                &:hover::after {
                    width: 100%;
                    background-color: @activeBgColor;
                    transition: all .3s;
                }
            }
        }        
    }

    .main {
        width: 96%;
        height: 100% - .vh(80)[];
        margin: 0 auto;
        position: relative;

        -ms-overflow-style: none;
        overflow-y: -moz-scrollbars-none;
        overflow-y: scroll;
        overflow-x: hidden;

        &::-webkit-scrollbar { 
            width: 0 !important;
            height: 0 !important;
        }

        ul {
            width: 98%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-bottom: .vh(10)[];
            position: relative;

            li {
                flex-shrink: 0;
                width: 24%;
                min-height: .vh(300)[];
                background-color: #fff;
                margin-top: .vh(15)[];
                position: relative;
                top: 0;
                transition: all .4s;
                cursor: pointer;
                text-align: center;
                padding-bottom: .vh(18)[];

                &:hover {
                    box-shadow: 0 .vh(1)[] .vh(10)[] rgba(100, 100, 100, 0.4);
                    top: .vh(-5)[];
                    transition: all .4s;
                }

                .cover {
                    width: 80%;
                    margin-top: .vh(20)[];
                }

                .title {
                    font-size: .vh(20)[];
                    margin: .vh(10)[] 0;
                    color: #606060;
                }

                .desc {
                    margin: 0 auto;
                    white-space: nowrap;
                    width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: .vh(14)[];
                    color: #b0b0b0;
                }

                &.empty {
                    cursor: default;
                    opacity: 0;

                    &:hover {
                        box-shadow: none;
                        top: 0;
                    }
                }

                .mask {
                    width: 100%;
                    height: 100%;
                    background-color: rgba(96, 96, 96, 0);
                    position: absolute;
                    top: 0;
                    left: 0;
                    user-select: none;

                    .add-app {
                        position: absolute;
                        top: 40%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        line-height: 1.5;
                        padding: .vh(5)[] .vw(10)[];
                        background-color: rgba(27, 134, 219, 1);
                        transition: all .4s;
                    }

                    .disable {
                        cursor: not-allowed;
                    }
                }

            }
        }

    }
}
